<template>
  <div class="productList">
    <!-- 二级菜单组件引入 -->
    <div class="breadcrumb knife_container"><router-link :to="{name: 'Index'}" class="bread_a">首页</router-link> <i class="el-icon-arrow-right"></i>
    商品列表
    </div>
    <second-menu @click-child ="clickCategory" @child-brand="clickBrand" :brandList="brandList"></second-menu>
    <!-- 商品列表类目 -->
     <!-- 二级商品系列 -->
     <div class="module_first knife_container">
        <div class="module_title clearfix">
          <span class="title"> <i class="el-icon-star-on"></i>商品名称</span>
        </div>
        <div class="product-div">
          <product class="product-box" :product = "getGoodsList.list" ></product>
          <!-- pagination -->
          <el-row v-if="getGoodsList.page && getGoodsList.page.totalPages > 1">
            <el-pagination class="page_box" background layout="total, prev, pager, next, jumper" :current-page="page"
              :total="getGoodsList.page.totalRecords | parseIntType" :page-size="getGoodsList.page.pageSize | parseIntType" @current-change="handlePage" ></el-pagination>
          </el-row>
        </div>
     </div>
  </div>
</template>
<script>
  import {product, secondMenu} from '@/components/index'
  import {getGoodsList, getBrandList} from '@/service/get-data'
  import {Col, Row, Pagination} from 'element-ui'
  import {setSession, getSession} from '@/config/mUntils'
  export default {
    components: {
      elCol: Col,
      elRow: Row,
      elPagination: Pagination,
      product,
      secondMenu
    },
    data () {
      return {
        getGoodsList: {}, // 返回商品列表和分页信息
        brandList: [],
        number: 15, // 每页显示数
        typeId: '', // 类目id
        type: '', // 类目类型
        goodsName: '', // 商品名称
        brandId: '', // 品牌id
        maxPrice: '', // 价格上限
        minPrice: '', // 价格下限
        keyword: '',
        page: 1
      }
    },
    methods: {
      // 刷新时的type 层级,typeid 搜索关键字 keyword
      _initType () {
        let queryobj = this.$route.query
        this.type = queryobj.type ? queryobj.type - 0 : ''
        this.typeId = queryobj.typeId ? queryobj.typeId - 0 : ''
        this.keyword = queryobj.keyword || ''
        this.brandId = queryobj.brand || ''
        this.page = getSession('page') - 0 || 1
      },
      // 品牌列表
      async fetchBrandList () {
        let res = await getBrandList(this.type, this.typeId, this.keyword)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.brandList = res.data
        }
      },
      // 获取商品列表
      async fetchGoodsList () {
        let res = await getGoodsList(this.page, this.number, this.typeId, this.type, this.goodsName, this.brandId, this.maxPrice, this.minPrice, this.keyword)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.getGoodsList = res.data
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'warning'
          })
        }
      },
      // 类目点击响应事件
      clickCategory (typeId, type) {
        this.setPage()
        this.typeId = typeId
        this.type = type
        this.brandId = ''
        this.fetchGoodsList()
        this.fetchBrandList()
      },
      // 品牌点击事件
      clickBrand (brandId) {
        this.setPage()
        this.brandId = brandId
        this.fetchGoodsList()
      },
      // 分页
      handlePage (page) {
        this.setPage(page)
        this.fetchGoodsList()
      },
      // 设置 session 的page
      setPage (page = 1) {
        setSession('page', page)
        this.page = page
      }
    },
    mounted () {
      this._initType()
      this.fetchGoodsList()
      this.fetchBrandList()
    },
    watch: {
      $route (newval) {
        this._initType()
      }
    },
    filters: {
      parseIntType (val) {
        return parseInt(val)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .productList{
    min-height: 800px
  }
  .second_list{
    li{
      float: left;
      border-bottom: 4px solid #FFFFFF;
      padding-bottom: 12px;
      @include fontbase();
      &.active{
         @include fontbase(#FFCC00);
         border-bottom: 4px solid #FFCC00;
      }
    }
    .second_item{
      img {
        vertical-align: middle;
      }
    }
  }
  .pro-icon{
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
  .all-category{
    position: absolute;
    right: 0;
    top: 12px;
  }
  .all-category-all{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .three{
    width:14%;
    float: left;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  a{
    &:hover{
      color:#FFCC00
    }
  }
  .module_first{
    padding-bottom:30px;
  }
  .module_title{
      margin-bottom:12.5px;
      .title{
        font-size: 18px;
        color: #333333;
        line-height: 25px;
        vertical-align: middle;
        i{
          color:#E8BA07;
          font-size:14px;
          padding-right: 5px;
        }
      }
    }
    .grid-brand{
      background: #FFFFFF;
      padding: 18px 0 0 18px;
      box-shadow: 0 0 5px 0 rgba(0,0,0,0.05);
      border-radius: 6px;
      color: #999999;
      margin-bottom: 22px;
      font-size: 14px;
      .title{
        margin-right: 48px;
        float: left;
      }
    }
    .brand-wrapper{
      margin-left: 78px;
       .brand-detail{
        display: inline-block;
        color: #666666;
        margin-right: 39px;
        margin-bottom: 18px;
        cursor: pointer;
        &.active{
          color: #ffcc00;
        }
      }
    }

</style>

